<template>
  <view>
    <view class="list_container">
      <view class="list_item" v-for="(item,index) in news_list" :key="index" @click="gotoWebView(item.link)">
        <view class="left">
          <view class="title">
            {{item.title}}
          </view>
          <view class="bottom">
            <view class="time">
              {{item.time}}
            </view>
            <view class="writer">
              {{item.writer}}
            </view>
          </view>
        </view>
        <image class="img" :src="item.src" mode="widthFix">
        </image> 
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        method:0,
        news_list:[
            // {
            //   title:"“崇本拓新，向海图强”拔尖计划2.0全国线上书院",
            //   time:"2022.5.20",
            //   writer:"中国海洋大学新闻中心",
            //   link:"https://mp.weixin.qq.com/s/5-52wJCImOKPU86MBspHGg",
            //   src:"../../static/news/news_center.png",
            // },
            // {
            //   title:"“崇本拓新，向海图强”拔尖计划2.0全国线上书院",
            //   time:"2022.5.20",
            //   writer:"中国海洋大学新闻中心",
            //   link:"https://mp.weixin.qq.com/s/5-52wJCImOKPU86MBspHGg",
            //   src:"../../static/news/news_center.png",
            // },
            // {
            //   title:"“崇本拓新，向海图强”拔尖计划2.0全国线上书院",
            //   time:"2022.5.20",
            //   writer:"中国海洋大学新闻中心",
            //   link:"https://mp.weixin.qq.com/s/5-52wJCImOKPU86MBspHGg",
            //   src:"../../static/news/news_center.png",
            // },
          ]
        
      };
    },
    onShow(options) {
      this.method=options.method
      this.getData()
      console.log("hello ",this.method);
    },
    async getHotList(){
      const { data: res } = await uni.$http.get('/news/recommend/v4')
        if (res.code != 1000) return uni.$showMsg()
        this.news_list=res.data.news
    }
    getData(){
      if(this.method==1){
        this.getHotList()
      }
    }
  }
</script>

<style lang="scss">
.list_container{
  .list_item{
     margin-bottom: 10px;
    display: flex;
    padding-left: 36rpx;
    padding-right: 36rpx;
    height: 89px;
    justify-content: space-between;
    border-radius: 8px;
    .img{
      width: 102px;
    }
    align-items: center;
    background-color: #fff;
    .left{
      width: 500rpx;
      display: flex;
      flex-direction: column;
      height: 100%;
      justify-content: space-around;
      align-items: flex-start;
      .title{
        margin-top: 10px;
        font-size: 15px;
        width: 85%;
      }
      .bottom{
        width: 100%;
        display: flex;
        font-size: 13px;
        color: rgba(174, 174, 178, 100);
        .writer{
          margin-left: 10px;
        }
      }
    }
  }
}
</style>
